<!--
 * @FilePath: Index.vue
 * @Author: jack
 * @Date: 2025-03-03 08:41:09
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-07-29 15:39:03
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="user-info-box">
        <SearchComp @clear="clearHandle">
            <RowItem label="关键字" :count="3">
                <el-input clearable placeholder="请输入公告内容关键字搜索" v-model="personQuery.search" prefix-icon="Search"
                    class="input-with-select" @input="Search">
                </el-input>
            </RowItem>
        </SearchComp>
        <Table :data="tableData" :config="tableConfig" :showLoading="loading" :showPage="false" @sizeChange="sizeChange"
            @CurrentChange="CurrentChange" @handleEdit="handleEdit">
            <el-button type="primary" @click="Add">添加公告</el-button>
        </Table>
        <EditModify :modelShow="modelShow" ref="childrenDom" @getList="getList" @modelCancel="modelCancel">
        </EditModify>
    </div>
</template>
<script setup lang="ts">
import $util from '../../../util/util'
import { ref, onMounted, reactive, h, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import EditModify from './EditModify.vue'
// 引入专属的request配置
import { noticeList, delNotice } from '../../Api/Publish'
import { PiniaStore } from '../../../store'
const store = PiniaStore()
const loading = ref(false)
const modelShow = ref(false)
const personQuery = reactive<any>({
    search: '',
    page: 1,
    page_size: store.pageQuery.page_size,
})
const Search = $util.debounce((val: string | number) => {
    personQuery.page = 1
    getList()
}, 500)
// 点击清空条件触发
const clearHandle = () => {
    personQuery.search = ''
    personQuery.page = 1
    getList()
}
// 表格数据
const total = ref(0)
const tableData = ref<any>([])
const tableConfig = ref<any>([
    { name: 'index', label: '序号', width: '60', type: 'index', checked: true },
    { name: 'content', label: '公告内容', type: 'change', width: '', checked: true },
    { name: 'creator', label: '创建人', type: 'change', width: '120', checked: true },
    { name: 'editor', label: '编辑人', type: 'change', width: '120', checked: true },
    { name: 'create_date', label: '创建时间', type: 'change', width: '180', checked: true },
    {
        name: '',
        label: '操作',
        width: '140',
        fixed: 'right',
        type: 'edit',
        checked: true,
        limit: 4,
        formatter: [
            { name: 'edit', label: '编辑', font: true, show: true, link: true, key: 'show' },
            { name: 'delete', label: '删除', font: true, show: true, link: true, key: 'show' }
        ]
    }
])
// 获取角色列表
const getList = async () => {
    loading.value = true
    const res: any = await noticeList(personQuery)
    tableData.value = res.data.list
    total.value = res.data.total
    loading.value = false
}
// 添加公告
const Add = () => {
  modelShow.value = true
  childrenDom.value.ruleForm.uuid = ''
  childrenDom.value.isChange = false
}
const childrenDom = ref<any>(null)
const handleEdit = async (item: any, name: string) => {
    if (name === 'edit') {
        modelShow.value = true
        nextTick(() => {
            Object.assign(childrenDom.value.ruleForm, item)
        })
    } else if (name === 'delete') {
        // 删除（修复后代码）
        ElMessageBox({
            title: '温馨提示',
            message: h('p', { style: 'font-weight:bold;font-size: 15px;color: #333333;' }, [
                h('span', null, '确定要删除该公告删除？'),
                h('p', { style: 'font-size: 14px;font-weight:normal;color: rgba(0,0,0,0.65);margin-top:10px;' }, '删除后将无法恢复，确定要继续吗?'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    const res: any = await delNotice({ id: item.uuid })
                    if (res.code !== 1) {
                        done()
                        return ElMessage.error(res.msg)
                    }
                    ElMessage.success(res.msg)
                    getList()
                    done()
                } else {
                    done() // 取消时正常关闭弹框
                }
            }
        }).then((action) => {
            // 确认操作已在 beforeClose 中处理
        }).catch((err) => {
            // 捕获取消操作的拒绝状态（err 为 'cancel'）
            if (err === 'cancel') {
                // 可选：添加取消提示（根据需求）
                // ElMessage.info('已取消删除')
            }
        })
    }
}
// 点击翻页器的长度
const sizeChange = () => {
    personQuery.page_size = store.pageQuery.page_size
    getList()
}
// 点击翻页器的页码
const CurrentChange = () => {
    personQuery.page = store.pageQuery.page
    getList()
}
const modelCancel = (bol: boolean) => {
    modelShow.value = bol
}
onMounted(() => {
    getList()
})
</script>
<style lang="scss" scoped></style>